<template>
  <div class="order-view">
    <el-button
      type="primary"
      plain
      icon="el-icon-plus"
      size="mini"
      @click="showAdd"
      v-hasPermi="['xiaoshou:saleBackRequest:add']"
    >新增
    </el-button>
    <el-dialog
      :title=title
      :visible.sync="addShow"
      width="60%"
      v-if="addShow"
      :before-close="handleClose"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <template>
        <div>
          <el-form ref="form" :model="form" label-width="80px" label-position="left">
            <el-form-item label="退货申请单编号" prop="saleBackRequestCode">
              <el-input v-model="form.saleBackRequestCode" disabled placeholder="请输入退货申请单编号"/>
            </el-form-item>
            <el-form-item label="销售出库单编号" prop="saleOutCode">
              <el-input v-model="form.saleOutCode" placeholder="请选择销售出库单" @focus="selStockOut"/>
            </el-form-item>
            <el-form-item label="客户名称" prop="cusName">
              <el-input v-model="form.cusName" disabled placeholder="请选择客户名称"/>
            </el-form-item>
            <el-form-item label="总价" prop="total">
              <el-input disabled v-model="form.total" placeholder="请输入总价"/>
            </el-form-item>
            <el-form-item label="总数量" prop="total">
              <el-input disabled v-model="form.totalNum" placeholder="请输入总数量"/>
            </el-form-item>
            <el-form-item label="制单人" prop="createBy">
              <el-input disabled v-model="form.createBy" placeholder="请输入制单人"/>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <StockOutDetail @update-total="updateTotal" :totalPriceTo="form.total"
                      :totalNumTo="form.totalNum" :stockOutIdTo="stockOut.id"
                      :saleBackRequestCodeTo="form.saleBackRequestCode" ref="sod"></StockOutDetail>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitForm">提 交</el-button>
        <el-button @click="closeAdd">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="选择 销售出库单"
               :visible.sync="showSelStockOut"
               width="60%"
               :before-close="handleClose"
               :modal-append-to-body="false"
               :append-to-body="true">
      <el-table :data="stockOutList">
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="出库单编号" align="center" prop="stockOutCode">
          <template slot-scope="scope">
            <el-button type="text" @click="confirmStockOut(scope.row)">{{
                scope.row.stockOutCode
              }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="销售订单编号" align="center" prop="orderCode"/>
        <el-table-column label="出库类型" align="center" prop="inventoryTypeId">
          <template slot-scope="scope">
            {{ scope.row.inventoryTypeId == 2 ? "销售出库" : "其他类型" }}
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="center" prop="cusName"/>
        <el-table-column label="创建时间" align="center" prop="createDate"/>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getStockOutList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SaleBackRequestDetail from "./SaleBackRequestDetail.vue"
import StockOutDetail from "./StockOutDetail.vue";
import request from '@/utils/request';

export default {
  name: "AddSaleBackRequest",
  components: {SaleBackRequestDetail, StockOutDetail},
  data() {
    return {
      title: "添加 销售退货申请",
      dialogVisible: false,
      addShow: false,
      showSelStockOut: false,
      stockOutList: [],
      stockOut: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      form: {
        saleBackRequestCode: "",
        saleOutCode: "",
        total: 0,
        totalNum: 0,
        createBy: this.$store.getters.name,
      },
      total: 0,
      saleBackRequest: {},
    };
  },
  methods: {
    reset() {
      this.resetForm("form");
      this.stockOut = {};
      this.stockOutList = [];
      this.$refs.sod.reset();
    },
    //修改总价
    updateTotal(total, totalNum) {
      this.form.total = total.toFixed(2);
      this.form.totalNum = totalNum;
    },
    showAdd() {
      this.addShow = true;
      this.form.saleBackRequestCode = "XSTHSQ" + Date.now();
    },
    closeAdd() {
      this.reset();
      this.addShow = false;
      this.$refs.sod.reset();
    },
    confirmStockOut(row) {
      this.stockOut = row;
      this.form.saleOutCode = row.stockOutCode;
      this.form.cusName = row.cusName;
      this.showSelStockOut = false;
    },
    handleClose(done) {
      done();
    },
    //获取出库单列表
    getStockOutList() {
      request({
        url: "/store/stockOut/getUseList",
        methods: "get",
        params: this.queryParams
      }).then(response => {
        this.stockOutList = response.rows;
        this.total = response.total;
      });
    },
    //弹出出库单列表
    selStockOut() {
      this.getStockOutList();
      this.showSelStockOut = true;
    },
    check() {
      if (this.form.saleBackRequestCode == null || this.form.saleBackRequestCode == '') {
        this.$notify({
          title: "警告",
          message: "退货申请编号不能为空！",
          type: "warning",
        })
        return false;
      }
      if (this.form.saleOutCode == null || this.form.saleOutCode == '') {
        this.$notify({
          title: "警告",
          message: "出库编号不能为空！",
          type: "warning",
        })
        return false;
      }
      if (!this.form.total > 0) {
        this.$notify({
          title: "警告",
          message: "总价必须大于0！",
          type: "warning",
        })
        return false;
      }
      return true;
    },
    submitForm() {
      if (!this.check()) {
        return;
      }
      this.form.createBy = this.$store.getters.name;
      request({
        url: "/xiaoshou/saleBackRequest/addSaleBackRequest",
        data: this.form,
        method: "post",
      }).then(res => {
        // this.$modal.msgSuccess("新增成功");
        this.$refs.sod.addDetails();
        this.$emit("updList");
        this.addShow = false;
        this.reset();
      });
    },
    cancel() {
      this.showSelStockOut = false;
    }
  },
};
</script>
